<template>
    <div class="screen-container" style='height:100vh' v-loading="loading">
        <div class='chart-container'>
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">告警大盘</span></h5>
                </div>
            </section>
          <section class="data-min-title">
            告警详情
          </section>
          <section class="data-sub-title">
            （应用保障系统、监控宝、UMS告警信息）
          </section>  
          <section class="data-sub-title">
            <el-button  size="medium"  type="text">{{date}}</el-button>
          </section>        
          <section class="data-min">
           <div class="head">
              <el-select v-model="from" placeholder="请选择来源" size="small" style="width: 150px;" @change="changeFrom">
                <el-option
                  v-for="item in froms"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="level" placeholder="请选择级别" size="small" style="width: 150px;" @change="changeLevel">
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>              
              <el-input v-model="eventType" placeholder="输入类型" size="small"  style="width: 150px;"></el-input>     
              <el-button size="small" type="primary" @click="queryList()">查询</el-button>
              <el-button-group class="datebutton">
                <el-button size="small" type="primary"  @click="changeDay(-1)" ><i class="el-icon-arrow-left el-icon--left"></i>前一天</el-button>
                <el-button size="small" type="primary"  @click="changeDay(1)" >后一天<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              </el-button-group>
           </div>
          </section>
          <section class="data-min-body">
              <template>
                <el-table
                :data="dateList"
                style="width: 100%">
                <el-table-column
                  label="时间" :formatter="dateFormat"  prop="time">
                </el-table-column>                      
                <el-table-column
                  label="IP" prop="ip">
                </el-table-column>
                <el-table-column
                  label="模块" prop="resname">
                </el-table-column>    
                <el-table-column
                  label="级别" prop="level">
                </el-table-column>
                <el-table-column
                  label="告警类型" prop="eventType">
                </el-table-column>
                <el-table-column
                  label="来源" prop="from">
                </el-table-column>                 
                <el-table-column
                  label="当前状态" prop="currentStatus">
                </el-table-column> 
                <el-table-column
                  label="告警详细内容" prop="alarmContent">
                </el-table-column>                
              </el-table>
            </template>
          </section>
          <section class="cat-title">
            CAT服务端正常
          </section>
          <section class="cat-native">
             <div style="float: left;">  
                <el-button  size="medium" type="text" >{{cattime}}</el-button>
             </div>
             <div style="float: right;">
              <el-button  size="medium"  type="text"  @click="changefre('-168')">[ -7d ] </el-button> 
              <el-button  size="medium"  type="text"  @click="changefre('-24')">[ -1d ]</el-button>  
              <el-button  size="medium"  type="text"  @click="changefre('-1')">[ -1h ]</el-button>  
              <el-button  size="medium"  type="text"  @click="changefre('1')">[ +1h ]</el-button>  
              <el-button  size="medium"  type="text"  @click="changefre('24')">[ +1d ]</el-button>
              <el-button  size="medium"  type="text"  @click="changefre('168')">[ +7d ]</el-button>
              <el-button  size="medium"  type="text"  @click="changefre('now')">[ now ]</el-button>  
             </div>
          </section>
          <section class="cat-native">
            <div class="cat-native-setTime">
              <el-button-group style="float:right">
                <el-button  v-for="(item,index) in buttonMinArr" :key="index" size="small" @click="changeMin(item)" :type="buttonMinNum == item || catmin == item? 'primary' : 'default'">
                  {{item}}
                </el-button>
              </el-button-group>
            </div>
           <div v-for="(item,index) in catbody" :key="index">
             <el-table class="cat-body" :data="item" size="mini">
              <el-table-column :label="index">
                <el-table-column label="系统" prop="domain"  min-width="70%"></el-table-column>
                <el-table-column label="个" prop="value" min-width="30%" :formatter="numFormat"></el-table-column>
              </el-table-column>
            </el-table>
           </div>
          </section>
        </div>
      </div>
</template>

<script>
import { getIndex, catbody, daybody } from '@/api/alarmScreenData'

export default {
  data() {
    return {
      loading: true,
      timeStr: null,
      catmin: null,
      cattime: null,
      catbody: [],
      catdate: null,
      date: null,
      dateList: [],
      buttonMinNum: null,
      froms: [{
        value: '全部',
        label: '全部'
      }, {
        value: '应用保障',
        label: '应用保障'
      }, {
        value: 'UMS',
        label: 'UMS'
      }, {
        value: '监控宝',
        label: '监控宝'
      }],
      from: null,
      levels: [{
        value: '全部',
        label: '全部'
      }, {
        value: '紧急',
        label: '紧急'
      }, {
        value: '主要',
        label: '主要'
      }, {
        value: '警告',
        label: '警告'
      }, {
        value: '次要',
        label: '次要'
      }, {
        value: '恢复正常',
        label: '恢复正常'
      }, {
        value: '提醒',
        label: '提醒'
      }, {
        value: '故障',
        label: '故障'
      }, {
        value: '无法获取数据',
        label: '无法获取数据'
      }, {
        value: '其他',
        label: '其他'
      }],
      level: null,
      eventType: null,
      buttonMinArr: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '38',
        '39',
        '40',
        '41',
        '42',
        '43',
        '44',
        '45',
        '46',
        '47',
        '48',
        '49',
        '50',
        '51',
        '52',
        '53',
        '54',
        '55',
        '56',
        '57',
        '58',
        '59'
      ]
    }
  },
  created() {
    this.getIndexData()
  },
  methods: {
    getIndexData() {
      this.loading = true
      var listQuery = { }
      getIndex(listQuery).then(response => {
        this.catbody = response.data.catbody
        this.cattime = response.data.cattime
        this.catmin = response.data.catmin
        this.catdate = response.data.catdate
        this.dateList = response.data.dateList
        this.date = response.data.date
        this.loading = false
      })
    },
    dateFormat(row, column) {
      var timestamp = row[column.property]
      if (timestamp === undefined) {
        return ''
      }
      var now = new Date()
      now.setTime(timestamp)
      var year = now.getFullYear()
      var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
      var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
      var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
      var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
      var second = now.getSeconds() > 9 ? now.getSeconds() : '0' + now.getSeconds()
      var timeStr = year + '-' + month + '-' + date + '  ' + hour + ':' + minute + ':' + second
      return timeStr
    },
    rowClassName(item) {
      if (item.count) {
        if (item.count > 1) {
          return 'warning-row'
        } else {
          return ''
        }
      }
    },
    changeMin(val) {
      this.loading = true
      this.buttonMinNum = val
      this.catmin = null
      var listQuery = { minute: val, catdate: this.catdate }
      catbody(listQuery).then(response => {
        this.catbody = response.data.catbody
        this.cattime = response.data.cattime
        this.catmin = response.data.catmin
        this.catdate = response.data.catdate
        this.loading = false
      })
    },
    changefre(val) {
      this.loading = true
      var listQuery = { step: val, catdate: this.catdate, minute: this.catmin }
      catbody(listQuery).then(response => {
        this.catbody = response.data.catbody
        this.cattime = response.data.cattime
        this.catmin = response.data.catmin
        this.catdate = response.data.catdate
        this.loading = false
      })
    },
    changeFrom(val) {
      this.loading = true
      if (val === '全部') {
        val = null
      }
      if (this.level === '全部') {
        this.level = null
      }
      var listQuery = { from: val, eventType: this.eventType, level: this.level, date: this.date }
      daybody(listQuery).then(response => {
        this.date = response.data.currentDate
        this.dateList = response.data.dateList
        this.loading = false
      })
    },
    changeLevel(val) {
      this.loading = true
      if (val === '全部') {
        val = null
      }
      if (this.from === '全部') {
        this.from = null
      }
      var listQuery = { from: this.from, eventType: this.eventType, level: val, date: this.date }
      daybody(listQuery).then(response => {
        this.date = response.data.currentDate
        this.dateList = response.data.dateList
        this.loading = false
      })
    },
    changeDay(val) {
      this.loading = true
      var listQuery = { step: val, eventType: this.eventType, level: this.level, from: this.from, date: this.date }
      daybody(listQuery).then(response => {
        this.date = response.data.currentDate
        this.dateList = response.data.dateList
        this.loading = false
      })
    },
    queryList() {
      this.loading = true
      var listQuery = { eventType: this.eventType, level: this.level, from: this.from, date: this.date }
      daybody(listQuery).then(response => {
        this.date = response.data.currentDate
        this.dateList = response.data.dateList
        this.loading = false
      })
    },
    numFormat(row, column, cellValue) {
      return parseFloat(cellValue)
    }
  }
}
</script>
<style  lang="scss" >
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 30px;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
    }
}
.chart-container{
  width: 100%;
  height: 80%;
  .chartChose{
    margin-bottom: 20px;
    padding: 10px 0 20px;
    border-bottom:1px solid #eee;
  }
  .chartShow{
    overflow: hidden;
    margin-top: 20px;
  }
  .chartChildItem{
    height: 400px;
    width: 33%;
    left: 0;
    float: left;
    position: relative;
    .chart-panel{
      height: 350px;
      width: 100%;
      left: 0;
      position: relative;

    }
  }
}
.setTime{
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  .setTimebtn{
    background: #666;
    padding: 4px 10px;
    border: none;
    border-radius: 0;
  }
  .datePicker{
    margin-left: 10px;
  }
}
.navigate{
  .headtime{
    float: left;
  }
  .grain{
    float: right;
  }
}
.title{
  text-align: center;
  line-height: 50px;
  height: 50px;  
}
.detail-title{
  font-size: 20px;
  text-align: center;
  padding-bottom: 30px;
}
.headMain{
  margin-bottom: 35px;
}
.cat-title{
  font-size: 20px;
  text-align: center;
  padding-top: 40px;  
}
.cat-native {
  padding-top: 30px;
}
.cat-native-body{
  padding-top: 20px;
  width: 20%;  
}
.cat-body{
  margin-top: 10px;
  width: 175px;  
  float: left;
  font-size: 10px;
}
.data-min-title{
  font-size: 20px;
  text-align: center; 
}
.data-sub-title{
  padding-top: 20px; 
  text-align: center;  
}
.data-min{
  padding-top: 30px;
  .head{
    .datebutton{
      float: right;
    }
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
  }
}
.cat-native-setTime{
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;  
}
.screen-container{
  margin: 30px 50px;
}
.el-loading-mask{
}
</style> 